import { Button, Form, Input, message, Modal } from 'antd'
import React, { forwardRef, ForwardRefRenderFunction, useContext, useEffect, useImperativeHandle, useRef, useState } from 'react'
import Upload from '@/component/uploadPdf/loadPdf'
import axios from '@/http'
import { AppContext } from '@/App'
import { TStore } from '@type'
import { RcFile } from 'antd/lib/upload'
import { UploadFile } from 'antd/lib/upload/interface'

const UploadPdf: ForwardRefRenderFunction<{ showModal: Function }, { search: Function; fileType: string }> = (
  { search, fileType },
  ref
) => {
  const [isModalVisible, setIsModalVisible] = useState(false)
  const [form] = Form.useForm()
  const {
    store: { username }
  } = useContext<TStore>(AppContext)
  const layout = {
    labelCol: { span: 4 },
    wrapperCol: { span: 20 }
  }
  const tailLayout = {
    wrapperCol: { offset: 20, span: 4 }
  }

  const showModal = () => {
    onReset()
    setIsModalVisible(true)
  }

  const handleOk = () => {
    setIsModalVisible(false)
  }

  const handleCancel = () => {
    setIsModalVisible(false)
  }
  const [loading, setLoading] = useState(false)
  const onFinish = (values: any) => {
    setLoading(true)
    const { type, direction, fileList } = values
    const formData = new FormData()
    formData.append('type', type)
    formData.append('direction', direction)
    formData.append('username', username)

    fileList.forEach((item: any) => {
      formData.append('fileList', item.originFileObj)
    })
    axios
      .post('/upload/PDF', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      })
      .then(res => {
        if (res.data.error === -1) {
          search()
          message.success('上传成功')
          onReset()
          handleCancel()
        } else {
          message.error('上传失败')
        }
      })
      .finally(() => {
        setLoading(false)
      })
  }

  const onReset = () => {
    form.resetFields()
    uploadPdfDom.current?.setFileList()
  }
  useEffect(() => {
    onReset()
  }, [fileType])
  useImperativeHandle(ref, () => {
    return { showModal }
  })
  const uploadPdfDom = useRef<{ fileList: UploadFile[]; setFileList: Function }>(null)
  return (
    <>
      <Modal title="新增pdf" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel} footer={null}>
        <Form {...layout} form={form} name="control-hooks" onFinish={onFinish} initialValues={{ type: '', direction: fileType }}>
          <Form.Item name="direction" label="技术方向" rules={[{ required: true, message: '技术方向不能为空!' }]}>
            <Input disabled={fileType !== ''} />
          </Form.Item>
          <Form.Item name="type" label="文件类型" rules={[{ required: true, message: '文件类型不能为空!' }]}>
            <Input />
          </Form.Item>

          <Upload ref={uploadPdfDom}></Upload>
          <Form.Item {...tailLayout}>
            <Button type="primary" htmlType="submit" loading={loading}>
              提交
            </Button>
          </Form.Item>
        </Form>
      </Modal>
    </>
  )
}

export default forwardRef(UploadPdf)
